<template>
  <view class="cart-empty">
    <image class="cart-img" :src="imgUrl" mode="aspectFill" />
    <view class="tip">{{ tip }}</view>
    <view class="btn" @click="handleClick">{{ btnText }}</view>
  </view>
</template>
<script>
export default {
  props: {
    imgUrl: {
      type: String,
      default:'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/empty.png',
    },
    tip: {
      type: String,
      default: '购物车是空的',
    },
    btnText: {
      type: String,
      default: '去首页',
    },
  },
  data() {
    return {

    }
  },
  methods: {
    handleClick() {
      this.$emit('handleClick');
    },
  },
}
</script>
<style scoped>
.cart-empty {
  padding: 64rpx 0rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: calc(100vh - 100rpx);
  background-color: #F6F6F6;
}

.cart-empty .cart-img {
  width: 260rpx;
  height: 260rpx;
  margin-bottom: 24rpx;
}

.cart-empty .tip {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #999;
  margin-bottom: 24rpx;
}

.cart-empty .btn {
  width: 240rpx;
  height: 72rpx;
  border-radius: 36rpx;
  text-align: center;
  line-height: 72rpx;
  border: 2rpx solid #37B79B;
  color: #37B79B;
  background-color: transparent;
  font-size: 28rpx;
  font-weight: bold;
}
</style>